<template>
  <div class="content">
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="$router.back(-1)" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="title">我的订单</div>
      </div>
    </div>

    <van-tabs v-model="active[0]" :border="true" color="#2C8DFF">
      <van-tab title="进行中" @click="select = 0">
        <div class="page-block">
          <van-list class="list-cell no-border van-clearfix"
                    van-clearfix v-model="loading[0]"
                    :finished="finished[0]"
                    finished-text="没有更多了"
                    @load="onLoad(0)"
                    :immediate-check="false">
            <template v-for="item in list[0]">
              <ul class="order-ul">
                <li class="item"><span class="tit">订单号：</span>{{item.order_number}}</li>
                <li class="item"><span class="tit">订单名称：</span>小白检车{{item.service_id}}</li>
                <li class="item"><span class="tit">预约时间：</span>{{stampToDate(item.go_time,1)}}</li>
                <li class="item"><span class="tit">预约地点：</span>{{item.address}}</li>
              </ul>
            </template>


          </van-list>

        </div>
      </van-tab>

      <van-tab title="已完成" @click="select = 1">
        <div class="page-block">
          <ul v-for="item in list[1]" class="order-ul">
            <li class="item"><span class="tit">订单号：</span>{{item.order_number}}</li>
            <li class="item"><span class="tit">订单名称：</span>小白检车{{item.service_id}}</li>
            <li class="item"><span class="tit">预约时间：</span>{{stampToDate(item.go_time,1)}}</li>
            <li class="item"><span class="tit">预约地点：</span>{{item.address}}</li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
  export default {
    name: "user_collect",
    components: {},
    data() {
      return {
        select:0,
        active: [0,0],
        page: [1,1],
        list: [[],[]],
        loading: [false,false],
        finished: [false,false],
      }
    },
    computed: {},
    mounted: function () {
      let that = this;
      this.onLoad(0);
      this.onLoad(1);
      $(window).scroll(function(){
        let scrollTop = $(this).scrollTop()-400;
        let scrollHeight = $(document).height();
        let windowHeight = $(this).height();
        if(!that.loading[that.select]){
          if(scrollTop + windowHeight == scrollHeight-400){
            that.onLoad(that.select);
          }
        }
      });
    },
    methods: {
      onLoad(status = 0) {
        let that = this;
        this.$api.member.getOrder(that.page[status],status,{}).then(res=>{
          res = res.data;
          if (res.data.data.length) {
            that.list[status].push(...res.data.data);
            that.page[status]++;
            that.loading[status] = false;
          } else {
            that.loading[status] = true;
            that.finished[status] = true;
          }
        });
      }

    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/user.scss";
</style>
